<template>
  <div>
    <el-dialog :visible.sync="visiabledialog" :before-close="handleClickCancel" :title="dialogTitle" width="1080px">
      <el-table :data="dialogData.tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" min-width="20" align="center"/>
        <el-table-column prop="status" label="状态" min-width="20" align="center"/>
        <el-table-column prop="userId" label="使用者" min-width="20" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单信息" min-width="20" align="center"/>
        <el-table-column prop="originalPrice" label="原价" min-width="20" align="center"/>
        <el-table-column prop="actualPayment" label="实付" min-width="20" align="center"/>
        <el-table-column prop="receiveTime" label="领取时间" min-width="30" align="center"/>
        <el-table-column prop="orderTime" label="使用时间" min-width="30" align="center"/>
      </el-table>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'Dialog',
  components: {
    Pagination
  },
  props: {
    visiabledialog: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formLabelWidth: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
      activeName: '1',
      currentpage: 1,
      pagesize: 10
    }
  },
  computed: {
    dialogTitle() {
      if (this.dialogData.tableData[0]) {
        return `${this.dialogData.tableData[0].batchName}-优惠码使用详情`
      }
    },
    total() {
      return this.dialogData.tableData.length
    }
  },
  methods: {
    // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
    handleClickCancel() {
      this.$emit('Visiable', false)
    },
    handleSizeChange(val) {
      console.log(val)
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleClickDialog(scope) {
      // 跳转到门户
      console.log(scope.row)
    }
  }
}
</script>

<style lang="scss">
</style>
